<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<script src="../../event.drop/jquery.event.drop.js" type="text/javascript"></script>
<script src="../../ux.selectable/jquery.ux.selectable.js" type="text/javascript"></script>
<link href="../../ux.calendar/jquery.ux.calendar.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.calendar/jquery.ux.calendar.js" type="text/javascript"></script>
<title>jquery.ux.selectable</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
.ux-calendar-wrap {
	width: 410px;
	}
.ux-calendar-next {
	right: 5px;
	}
.ux-calendar-month {
	float: left;
	margin: 0 5px 0 0;
	}
#calendar .ux-selectable-active {
	background-color: #FFC;
	color: #330;
	}
.ux-selectable-selection {
	position: absolute;
	border: 1px solid #0F0;
	background: #CFC;
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#calendar')
		.bind("update:calendar",function(ev){
			$( this ).ux("selectable.destroy")
				.selectable({
					find: 'td.ux-calendar-thismonth'
					});
			})
		.bind("select:selectable deselect:selectable",function( ev, cells ){
			var $cal = $( this );
			$.each( cells, function( i, td ){
				var num = (/(?:^|\s)ms(\d+)(?:\s|$)/).exec( td.className || "" );
				if ( num ) $cal.ux("calendar.select", parseInt( num[1] ), ev.type=="select:selectable" );
				});
			})
		.calendar({
			months: 2,
			multi: true
			})
		
	});
</script>

<h2>ux.selectable / calendar</h2>

<div id="calendar"></div>

</body></html>